<style>
    .up-btn, .down-btn {vertical-align: middle; cursor: pointer; display: inline-block; width: 18px;height: 22px;margin: 0 3px;background: url(/static/images/icon-arrs.gif) no-repeat 0 0;}
    .down-btn {background-position: right top;}
    .vjs-attrList > :first-child .up-btn {background-position: left bottom; cursor: inherit;}
    .vjs-attrList > :last-child .down-btn {background-position: right bottom; cursor: inherit;}
    .del-btn { vertical-align: middle; cursor: pointer; display: inline-block;width: 20px;height: 20px; color: #fff; text-align: center; background: rgba(153, 153, 153, 0.6); border-radius: 10px;}
    .del-btn:hover { background: #000;color: #fff; }
</style>
<div class="layui-card js-view-addArticle">
    <div class="layui-card-header">
        <a class="cl-38f" target="page" href="{:U('Goods/cat')}">产品分类</a> / {$row?'编辑':'添加'}分类
    </div>
    <div class="layui-card-body">
        <form class="layui-form" method="post" action="{:U('Goods/addCat')}?id={$row.id??''}" >
            <div class="layui-tab">
                <ul class="layui-tab-title">
                    <li class="layui-this">基本信息</li>
                    <li>SEO设置</li>
                    <li>参数列表</li>
                </ul>
                <div class="layui-tab-content pt20 w700">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-form-item">
                            <label class="layui-form-label">分类名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" value="{$row.name??''}" vtype="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input" maxlength="50" autofocus/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">英文别名</label>
                            <div class="layui-input-block">
                                <input type="text" name="en_title" value="{$row.en_title??''}" placeholder="请输入英文别名" autocomplete="off" class="layui-input" maxlength="200"/>
                            </div>
                        </div>
                        {if isset($pid)&&$pid&&$ptitle }
                        <div class="layui-form-item">
                            <label class="layui-form-label">上级分类</label>
                            <div class="layui-input-block"><input value="{$ptitle}" class="layui-input" disabled style="border: none;"/>
                                <input type="hidden" name="parent_id" value="{$pid}"/>
                            </div>
                        </div>
                        {/if}
                        <div class="layui-form-item">
                            <label class="layui-form-label">产品模型</label>
                            <div class="layui-input-block">
                                <select name="channel_id">
                                    <option value="0">默认</option>
                                    {foreach $channelList as $item}
                                    <option value="{$item.id}" {if $row&&$item.id==$row.channel_id }selected{/if}>{$item.title}</option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">分类图片</label>
                            <div class="layui-input-block">
                                {imgspace name="img" value="$row.img??''" title="分类图片" /}
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">分类模板</label>
                            <div class="layui-input-block">
                                <select name="tmpl_path">
                                    {foreach $templist as $key=>$item}
                                    <option value="{$key}" {if $row&&$key==$row['tmpl_path'] }selected{/if}>{$item}</option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">产品页模板</label>
                            <div class="layui-input-block">
                                <select name="tmpl_view">
                                    {foreach $templist_view as $key=>$item}
                                    <option value="{$key}" {if $row&&$key==$row['tmpl_view'] }selected{/if}>{$item}</option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-form-item">
                            <label class="layui-form-label">SEO标题</label>
                            <div class="layui-input-block">
                                <input type="text" name="seo_title" value="{$row.seo_title??''}" autocomplete="off" class="layui-input" placeholder="SEO标题" maxlength="100"/>
                                <p class="cl-888 mt5 f12"> 默认为分类名称 </p>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">SEO关键词</label>
                            <div class="layui-input-block">
                                <input type="text" name="seo_keywords" value="{$row.seo_keywords??''}" autocomplete="off" class="layui-input" placeholder="SEO关键词" maxlength="100"/>
                                <p class="cl-888 mt5 f12"> 默认为分类名称 </p>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">SEO描述</label>
                            <div class="layui-input-block">
                                <textarea name="seo_description" class="layui-textarea" placeholder="SEO描述">{$row.seo_description??''}</textarea>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm vjs-select-attrs">选择参数</button>
                        <div>
                            <table class="layui-table">
                                <colgroup>
                                    <col width="80">
                                    <col width="200">
                                    <col width="250">
                                    <col>
                                </colgroup>
                                <thead>
                                <tr>
                                    <th style="text-align:center;">参数ID</th>
                                    <th style="text-align:center;">参数名称</th>
                                    <th style="text-align:center;">操作</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody class="tc vjs-attrList">
                                {foreach $attrs as $item}
                                <tr>
                                    <td><input type="hidden" name="attrs[]" value="{$item.id}"/>{$item.id}</td>
                                    <td>{$item.name}</td>
                                    <td><a class="up-btn"></a><a class="down-btn"></a><a class="del-btn">x</a></td>
                                    <td></td>
                                </tr>
                                {/foreach}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item mt30">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn layui-btn-normal" lay-submit="">确认提交</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    (function () {
        var $view = $('.js-view-addArticle');

        $('.vjs-attrList', $view).on('click', 'a.up-btn', function () {
            var $tr = $(this).closest('tr');
            $tr.prev().before($tr);
        }).on('click', 'a.down-btn', function () {
            var $tr = $(this).closest('tr');
            $tr.next().after($tr);
        }).on('click', 'a.del-btn', function () {
            $(this).closest('tr').remove();
        });

        $('.vjs-select-attrs', $view).on('click', function () {
            $.page({
                url: '{:U("Goods/attrList")}',
                data: {},
                area: ['1024px', '550px'],
                yes: function (layero, index) {
                    var $rows = $('tr.selected', layero);
                    if (!$rows.length) {
                        $.showMsg(false, '请选择数据行！');
                        return false;
                    }
                    var ids = [];
                    $('.vjs-attrList tr', $view).each(function () {
                        ids.push($('[type="hidden"]', this).val());
                    });

                    var $list = $('.vjs-attrList', $view);
                    $rows.each(function () {
                        var name = $('td[field="参数名称"]', this).text().trim(),
                            id = $(this).data('id') + '';
                        if ($.inArray(id, ids) > -1) {
                            return;
                        }
                        $('<tr>', {
                            html: [
                                '<td><input type="hidden" name="attrs[]" value="' + id + '"/>' + id + '</td>',
                                '<td>' + name + '</td>' +
                                '<td><a class="up-btn"></a><a class="down-btn"></a><a class="del-btn">x</a></td>' +
                                '<td></td>'
                            ].join(),
                        }).appendTo($list);
                    });

                }
            });
        });
    })();
</script>